<!--
*@Author: zt
*@Description: 动态表单创建
*@Date: 2024-09-10
-->
<template>
  <u-dialog
    v-bind="$attrs"
    :title="$attrs['title'] || '动态业务配置'"
    @submit="submit"
    @close="close"
  >
    <div class="contain">
      <div class="formButtonBox" style="width: 30vw; background-color: #fff">
        <u-busi-card title="模块一">
          <u-form
            :elements="elements"
            :model="SForm"
            ref="formRef"
            v-bind="$attrs"
          />
        </u-busi-card>

        <u-busi-card title="组件模块">
          <a-row :gutter="[16, 16]">
            <a-col :span="8">
              <div
                class="itemBox"
                style="border: 1px solid #808080; color: #808080"
                @click="addFormItem('input')"
              >
                输入框
              </div>
            </a-col>

            <a-col :span="8">
              <div
                class="itemBox"
                style="border: 1px solid #808080; color: #808080"
                @click="addFormItem('select')"
              >
                下拉框
              </div>
            </a-col>

            <!-- <a-col :span="8">
              <div class="itemBox" style=" border: 1px solid #808080  ;
  color: #808080  ;" @click="addFormItem('switch')">
                开关
              </div>
            </a-col> -->

            <!-- <a-col :span="8">
              <div class="itemBox" style=" border: 1px solid #DEB887 ;
  color: #DEB887 ;" @click="addFormItem('tree')">
                添加树
              </div>
            </a-col> -->

            <!-- <a-col :span="8">
              <div class="itemBox" style=" border: 1px solid #EE82EE ;
  color: #EE82EE ;" @click="addFormItem('upload')">
                添加上传
              </div>
            </a-col> -->

            <!-- <a-col :span="8">
              <div class="itemBox" style=" border: 1px solid #FF69B4  ;
  color: #FF69B4  ;" @click="addFormItem('checkbox')">
                添加复选框
              </div>
            </a-col> -->

            <a-col :span="8">
              <div
                class="itemBox"
                style="border: 1px solid #808080; color: #808080"
                @click="addFormItem('datepicker')"
              >
                时间选择
              </div>
            </a-col>

            <!-- <a-col :span="8">
              <div class="itemBox" style=" border: 1px solid #800000 ;
  color: #800000 ;" @click="addFormItem('radio')">
                添加单选框
              </div>
            </a-col> -->
            <!-- 
            <a-col :span="8">
              <div class="itemBox" style=" border: 1px solid #808000;
  color: #808000;" @click="addFormItem('cascader')">
                添加级联框
              </div>
            </a-col> -->
          </a-row>
        </u-busi-card>
      </div>

      <u-busi-card title="表单区">
        <div
          class="formBox"
          style="
            width: 30vw;
            height: 70vh;
            background-color: #fff;
            overflow-y: auto;
          "
        >
          <a-form :ref="ruleForm" :model="form" :rules="rules">
            <!-- 动态 -->
            <div v-for="(item, index) in form.list" :key="index">
              <a-form-item
                :label="form.list[index].name"
                :name="item.name"
                :rules="item.rule"
                :class="clickIndex == index ? 'active' : 'unActive'"
                :labelCol="{ span: 4 }"
                @click="onClick(index, item.itemType)"
              >
                <!-- 输入框 -->
                <u-input
                  v-if="item.itemType == 'input'"
                  v-model:value="item.value"
                  :addonAfter="item.addonAfter"
                  :addonBefore="item.addonBefore"
                  :allowClear="item.allowClear"
                  :bordered="item.bordered"
                  :clearIcon="item.clearIcon"
                  :placeholder="item.placeholder"
                  :disabled="true"
                  :maxlength="item.maxlength"
                  :prefix="item.prefix"
                  :showCount="item.showCount"
                  :status="item.status"
                  :size="item.size"
                  :suffix="item.suffix"
                  :type="item.type"
                  readonly
                ></u-input>

                <!-- 下拉框 -->
                <u-select
                  v-if="item.itemType == 'select'"
                  v-model:value="item.value"
                  :allowClear="item.allowClear"
                  :autoClearSearchValue="item.autoClearSearchValue"
                  :autofocus="item.autofocus"
                  :bordered="item.bordered"
                  :clearIcon="item.clearIcon"
                  :defaultActiveFirstOption="item.defaultActiveFirstOption"
                  :defaultOpen="item.defaultOpen"
                  :disabled="true"
                  :popupClassName="item.popupClassName"
                  :dropdownMatchSelectWidth="item.dropdownMatchSelectWidth"
                  :filterOption="item.filterOption"
                  :firstActiveValue="item.firstActiveValue"
                  :mode="item.mode"
                  :options="item.options"
                  :placeholder="item.placeholder"
                  :fieldNames="{
                    label: 'label',
                    value: 'id',
                    options: 'children',
                  }"
                ></u-select>

                <!-- 开关 -->
                <a-switch
                  v-if="item.itemType == 'switch'"
                  v-model:checked="item.value"
                  :autofocus="item.autofocus"
                  :checkedChildren="item.checkedChildren"
                  :checkedValue="item.checkedValue"
                  :disabled="item.disabled"
                  :loading="item.loading"
                  :size="item.size"
                  :unCheckedChildren="item.unCheckedChildren"
                  :unCheckedValue="item.unCheckedValue"
                />

                <!-- 树 -->
                <u-tree
                  v-if="item.itemType == 'tree'"
                  :showSearch="item.showSearch"
                  :checkable="item.checkable"
                  v-model:checkedKeys="item.checkedKeys"
                  v-model:expandedKeys="item.expandedKeys"
                  v-model:selectedKeys="item.selectedKeys"
                  :disabled="item.disabled"
                  :fieldNames="{
                    title: 'name',
                    key: 'keyid',
                    children: 'children',
                  }"
                  :multiple="item.multiple"
                  :treeData="item.treeData"
                ></u-tree>

                <!-- 上传 -->
                <u-field-upload
                  v-if="item.itemType == 'upload'"
                  v-model:value="item.value"
                  :fileParams="{
                    bucket: 'DOC_BIZ_TYPE_POLICY',
                    biztype: '1',
                  }"
                  :disabled="item.disabled"
                  :multiple="item.multiple"
                ></u-field-upload>

                <!-- 复选框 -->
                <a-checkbox-group
                  v-if="item.itemType == 'checkbox'"
                  v-model:value="item.value"
                  :disabled="item.disabled"
                  :options="item.options"
                />

                <!-- 时间选择 -->
                <u-date-picker
                  v-if="item.itemType == 'datepicker'"
                  v-model:value="item.value"
                  :valueFormat="item.valueFormat"
                  :format="item.valueFormat"
                  :showTime="
                    item.valueFormat == 'YYYY-MM-DD HH:mm' ? true : false
                  "
                  :disabled-date="item.disabledDate"
                  :disabled="true"
                ></u-date-picker>

                <!-- 单选框 -->
                <a-radio-group
                  v-if="item.itemType == 'radio'"
                  v-model:value="item.value"
                  :options="item.options"
                  :disabled="item.disabled"
                />

                <!-- 级联框 -->
                <u-cascader
                  v-if="item.itemType == 'cascader'"
                  v-model:value="item.value"
                  :fieldNames="{ title: 'label', key: 'value' }"
                  :multiple="item.multiple"
                  :disabled="item.disabled"
                  :showSearch="item.showSearch"
                  :searchValue="item.searchValue"
                  :bordered="item.bordered"
                  :options="item.options"
                ></u-cascader>
              </a-form-item>
            </div>
          </a-form>
          <!-- <div class="formButton">
            <a-button v-if="form.list.length > 0" type="primary" style="cursor: pointer" @click="btnSubmit">
              提交
            </a-button>
          </div> -->
        </div>
      </u-busi-card>

      <u-busi-card title="属性区">
        <div
          class="formItemBox"
          style="
            width: 30vw;
            height: 70vh;
            background-color: #fff;
            overflow-y: auto;
          "
        >
          <div class="InputFormBox">
            <!-- 输入框 -->
            <a-form :model="formInputState" v-if="showFormItemType == 'input'">
              <a-row>
                <a-col :span="24">
                  <a-form-item label="标题名" :labelCol="{ span: 4 }">
                    <a-input
                      v-model:value="formInputState.name"
                      :maxlength="5"
                      :placeholder="'最多填写5个字符'"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="后置标签" :labelCol="{ span: 4 }">
                    <a-input v-model:value="formInputState.addonAfter" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="前置标签" :labelCol="{ span: 4 }">
                    <a-input v-model:value="formInputState.addonBefore" />
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="24">
                  <a-form-item label="后缀图标" :labelCol="{ span: 4 }">
                    <a-input v-model:value="formInputState.suffix" />
                  </a-form-item>
                </a-col> -->
                <a-col :span="24">
                  <a-form-item label="文本类型" :labelCol="{ span: 4 }">
                    <a-select
                      v-model:value="formInputState.type"
                      :options="inputTypeSelectOptions"
                    ></a-select>
                    <!-- <a-input v-model:value="formInputState.type" /> -->
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="24">
                  <a-form-item label="清除图标">
                    <a-input v-model:value="formInputState.clearIcon" />
                  </a-form-item>
                </a-col> -->
                <a-col :span="24">
                  <a-form-item label="最大长度" :labelCol="{ span: 4 }">
                    <a-input v-model:value="formInputState.maxlength" />
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="24">
                  <a-form-item label="前缀图标">
                    <a-input v-model:value="formInputState.prefix" />
                  </a-form-item>
                </a-col> -->
                <!-- <a-col :span="24">
                  <a-form-item label="校验状态">
                    <a-input v-model:value="formInputState.status" />
                  </a-form-item>
                </a-col> -->
                <a-col :span="6">
                  <a-form-item label="清除" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formInputState.allowClear" />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="边框" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formInputState.bordered" />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="禁用" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formInputState.disabled" />
                  </a-form-item>
                </a-col>
                <a-col :span="6">
                  <a-form-item label="展示字数" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formInputState.showCount" />
                  </a-form-item>
                </a-col>
              </a-row>

              <!-- <a-form-item label="默认内容">
                <a-input v-model:value="formInputState.placeholder" />
              </a-form-item> -->

              <!-- 
            <a-form-item label="控件大小">
              <a-input v-model:value="formInputState.size" />
            </a-form-item> -->
            </a-form>

            <!-- 下拉框 -->
            <a-form
              :model="formSelectState"
              v-if="showFormItemType == 'select'"
            >
              <a-row>
                <a-col :span="24">
                  <a-form-item label="标题名" :labelCol="{ span: 4 }">
                    <a-input
                      v-model:value="formSelectState.name"
                      :maxlength="5"
                      :placeholder="'最多填写5个字符'"
                    />
                  </a-form-item>
                </a-col>

                <a-col :span="24">
                  <a-form-item label="数据源" :labelCol="{ span: 4 }">
                    <a-input v-model:value="formSelectState.selectoptions" />
                    <!-- <a-select v-model:value="formSelectState.selectoptions" :options="formSelectType"></a-select> -->
                  </a-form-item>
                </a-col>

                <!-- <a-col :span="24">
                  <a-form-item label="提示内容" :labelCol="{ span: 4 }">
                    <a-input v-model:value="formSelectState.placeholder" />
                  </a-form-item>
                </a-col> -->

                <a-col :span="6">
                  <a-form-item label="清除图标" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formSelectState.allowClear" />
                  </a-form-item>
                </a-col>

                <!-- <a-col :span="6">
                  <a-form-item label="获取焦点" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formSelectState.autofocus" />
                  </a-form-item>
                </a-col> -->

                <a-col :span="6">
                  <a-form-item label="边框" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formSelectState.bordered" />
                  </a-form-item>
                </a-col>

                <a-col :span="6">
                  <a-form-item label="禁用" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formSelectState.disabled" />
                  </a-form-item>
                </a-col>

                <!-- <a-col :span="6">
                  <a-form-item label="筛选" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formSelectState.filterOption" />
                  </a-form-item>
                </a-col> -->

                <!-- <a-col :span="6">
                  <a-form-item label="选中项后清空">
                    <a-switch v-model:checked="formSelectState.autoClearSearchValue" />
                  </a-form-item>
                </a-col> -->

                <!-- <a-col :span="24">
                  <a-form-item label="自定义清除图标">
                    <a-input v-model:value="formSelectState.clearIcon" />
                  </a-form-item>
                </a-col> -->
                <!-- <a-col :span="24">
                  <a-form-item label="高亮第一个">
                    <a-switch v-model:checked="formSelectState.defaultActiveFirstOption" />
                  </a-form-item>
                </a-col> -->
                <!-- <a-col :span="24">
                  <a-form-item label="展开下拉">
                    <a-switch v-model:checked="formSelectState.defaultOpen" />
                  </a-form-item>
                </a-col> -->

                <!-- <a-col :span="24">
                  <a-form-item label="下拉菜单className属性">
                    <a-input v-model:value="formSelectState.popupClassName" />
                  </a-form-item>
                </a-col> -->
                <!-- <a-col :span="24">
                  <a-form-item label="菜单和选择器同宽">
                    <a-switch v-model:checked="formSelectState.dropdownMatchSelectWidth" />
                  </a-form-item>
                </a-col> -->

                <!-- <a-col :span="24">
                  <a-form-item label="默认高亮">
                    <a-input v-model:value="formSelectState.firstActiveValue" />
                  </a-form-item>
                </a-col> -->
                <!-- <a-col :span="24">
                  <a-form-item label="模式">
                    <a-input v-model:value="formSelectState.mode" />
                  </a-form-item>
                </a-col> -->
              </a-row>
            </a-form>

            <!-- 开关 -->
            <a-form
              :model="formSwitchState"
              v-if="showFormItemType == 'switch'"
            >
              <a-row>
                <a-col :span="24">
                  <a-form-item label="标题名" :labelCol="{ span: 6 }">
                    <a-input
                      v-model:value="formSwitchState.name"
                      :maxlength="5"
                      :placeholder="'最多填写5个字符'"
                    />
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="24">
                  <a-form-item label="选中时的值" :labelCol="{ span: 6 }">
                    <a-input v-model:value="formSwitchState.checkedValue" />
                  </a-form-item>
                </a-col> -->
                <a-col :span="24">
                  <a-form-item label="选中时的内容" :labelCol="{ span: 6 }">
                    <a-input v-model:value="formSwitchState.checkedChildren" />
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="24">
                  <a-form-item label="非选中时的值" :labelCol="{ span: 6 }">
                    <a-input v-model:value="formSwitchState.unCheckedValue" />
                  </a-form-item>
                </a-col> -->
                <a-col :span="24">
                  <a-form-item label="非选中时的内容" :labelCol="{ span: 6 }">
                    <a-input
                      v-model:value="formSwitchState.unCheckedChildren"
                    />
                  </a-form-item>
                </a-col>

                <a-col :span="6">
                  <a-form-item label="禁用" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formSwitchState.disabled" />
                  </a-form-item>
                </a-col>
              </a-row>

              <!-- <a-form-item label="大小">
                <a-input v-model:value="formSwitchState.size" />
              </a-form-item> -->

              <!-- <a-form-item label="加载中">
                <a-switch v-model:checked="formSwitchState.loading" />
              </a-form-item> -->
            </a-form>

            <!-- 树 -->
            <a-form :model="formTreeState" v-if="showFormItemType == 'tree'">
              <a-row>
                <a-col :span="24">
                  <a-form-item label="标题名" :labelCol="{ span: 5 }">
                    <a-input v-model:value="formTreeState.name" />
                  </a-form-item>
                </a-col>

                <a-col :span="24">
                  <a-form-item label="选中复选框节点" :labelCol="{ span: 5 }">
                    <a-input v-model:value="formTreeState.checkedKeys" />
                  </a-form-item>
                </a-col>

                <a-col :span="24">
                  <a-form-item label="展开指定节点" :labelCol="{ span: 5 }">
                    <a-input v-model:value="formTreeState.expandedKeys" />
                  </a-form-item>
                </a-col>

                <a-col :span="24">
                  <a-form-item label="设置选中节点" :labelCol="{ span: 5 }">
                    <a-input v-model:value="formTreeState.selectedKeys" />
                  </a-form-item>
                </a-col>

                <a-col :span="24">
                  <a-form-item label="数据源" :labelCol="{ span: 5 }">
                    <a-input v-model:value="formTreeState.treeData" />
                  </a-form-item>
                </a-col>

                <a-col :span="6">
                  <a-form-item label="多选" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formTreeState.multiple" />
                  </a-form-item>
                </a-col>

                <a-col :span="6">
                  <a-form-item label="禁用" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formTreeState.disabled" />
                  </a-form-item>
                </a-col>

                <a-col :span="6">
                  <a-form-item label="复选框" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formTreeState.checkable" />
                  </a-form-item>
                </a-col>

                <a-col :span="6">
                  <a-form-item label="搜索框" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formTreeState.showSearch" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>

            <!-- 上传 -->
            <a-form
              :model="formUploadState"
              v-if="showFormItemType == 'upload'"
            >
              <a-row>
                <a-col :span="24">
                  <a-form-item label="标题名" :labelCol="{ span: 4 }">
                    <a-input v-model:value="formUploadState.name" />
                  </a-form-item>
                </a-col>

                <a-col :span="24">
                  <a-form-item label="上传类型" :labelCol="{ span: 4 }">
                    <a-input v-model:value="formUploadState.accept" />
                  </a-form-item>
                </a-col>

                <a-col :span="6">
                  <a-form-item label="禁用" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formUploadState.disabled" />
                  </a-form-item>
                </a-col>

                <a-col :span="6">
                  <a-form-item label="多选" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formUploadState.multiple" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>

            <!-- 复选框 -->
            <a-form
              :model="formCheckboxState"
              v-if="showFormItemType == 'checkbox'"
            >
              <a-row>
                <a-col :span="24">
                  <a-form-item label="标题名" :labelCol="{ span: 4 }">
                    <a-input v-model:value="formCheckboxState.name" />
                  </a-form-item>
                </a-col>

                <a-col :span="24">
                  <a-form-item label="数据源" :labelCol="{ span: 4 }">
                    <a-input v-model:value="formCheckboxState.options" />
                  </a-form-item>
                </a-col>

                <a-col :span="6">
                  <a-form-item label="禁用" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formCheckboxState.disabled" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>

            <!-- 时间选择 -->
            <a-form
              :model="formDatePickerState"
              v-if="showFormItemType == 'datepicker'"
            >
              <a-row>
                <a-col :span="24">
                  <a-form-item label="标题名" :labelCol="{ span: 4 }">
                    <a-input v-model:value="formDatePickerState.name" />
                  </a-form-item>
                </a-col>
                <a-col :span="24">
                  <a-form-item label="日期格式" :labelCol="{ span: 4 }">
                    <!-- <a-input v-model:value="formDatePickerState.valueFormat" /> -->
                    <a-select
                      v-model:value="formDatePickerState.valueFormat"
                      :options="datePickerOptions"
                    ></a-select>
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="24">
                  <a-form-item label="不可选择日期">
                <a-input v-model:value="formDatePickerState.disabledDate" />
              </a-form-item>
                </a-col> -->
                <a-col :span="6">
                  <a-form-item label="禁用" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formDatePickerState.disabled" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>

            <!-- 单选框 -->
            <a-form :model="formRadioState" v-if="showFormItemType == 'radio'">
              <a-row>
                <a-col :span="24">
                  <a-form-item label="标题名" :labelCol="{ span: 4 }">
                    <a-input v-model:value="formRadioState.name" />
                  </a-form-item>
                </a-col>

                <a-col :span="24">
                  <a-form-item label="数据源" :labelCol="{ span: 4 }">
                    <a-input v-model:value="formRadioState.options" />
                  </a-form-item>
                </a-col>

                <a-col :span="6">
                  <a-form-item label="禁用" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formRadioState.disabled" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>

            <!-- 级联框 -->
            <a-form
              :model="formCascaderState"
              v-if="showFormItemType == 'cascader'"
            >
              <a-row>
                <a-col :span="24">
                  <a-form-item label="标题名" :labelCol="{ span: 4 }">
                    <a-input v-model:value="formCascaderState.name" />
                  </a-form-item>
                </a-col>

                <a-col :span="24">
                  <a-form-item label="数据源" :labelCol="{ span: 4 }">
                    <a-input v-model:value="formCascaderState.options" />
                  </a-form-item>
                </a-col>

                <a-col :span="24">
                  <a-form-item label="搜索值" :labelCol="{ span: 4 }">
                    <a-input v-model:value="formCascaderState.searchValue" />
                  </a-form-item>
                </a-col>

                <a-col :span="6">
                  <a-form-item label="搜索框" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formCascaderState.showSearch" />
                  </a-form-item>
                </a-col>

                <a-col :span="6">
                  <a-form-item label="多节点" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formCascaderState.multiple" />
                  </a-form-item>
                </a-col>

                <a-col :span="6">
                  <a-form-item label="禁止" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formCascaderState.disabled" />
                  </a-form-item>
                </a-col>

                <a-col :span="6">
                  <a-form-item label="边框" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formCascaderState.bordered" />
                  </a-form-item>
                </a-col>

                <a-col :span="6">
                  <a-form-item label="支持清除" :labelCol="{ span: 12 }">
                    <a-switch v-model:checked="formCascaderState.allowClear" />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>

            <!-- 右侧事件交互 -->
            <a-form-item>
              <a-space>
                <a-button
                  style="margin-left: 10px"
                  v-if="showFormItemType"
                  @click="showFormItemType = ''"
                >
                  关闭
                </a-button>
                <a-button
                  type="dashed"
                  v-if="showFormItemType"
                  style="cursor: pointer; color: rgb(97, 97, 229)"
                  @click="delectContent"
                >
                  删除
                </a-button>
                <a-button
                  type="dashed"
                  v-if="showFormItemType"
                  style="cursor: pointer; color: rgb(97, 97, 229)"
                  @click="MoveContent"
                >
                  上移
                </a-button>
                <a-button
                  type="primary"
                  v-if="showFormItemType == 'input'"
                  @click="onChangeForm(formInputState)"
                >
                  配置保存
                </a-button>
                <a-button
                  type="primary"
                  v-if="showFormItemType == 'select'"
                  @click="onChangeForm(formSelectState)"
                >
                  配置保存
                </a-button>

                <a-button
                  type="primary"
                  v-if="showFormItemType == 'switch'"
                  @click="onChangeForm(formSwitchState)"
                >
                  配置保存
                </a-button>

                <a-button
                  type="primary"
                  v-if="showFormItemType == 'tree'"
                  @click="onChangeForm(formTreeState)"
                >
                  配置保存
                </a-button>

                <a-button
                  type="primary"
                  v-if="showFormItemType == 'upload'"
                  @click="onChangeForm(formUploadState)"
                >
                  配置保存
                </a-button>

                <a-button
                  type="primary"
                  v-if="showFormItemType == 'checkbox'"
                  @click="onChangeForm(formCheckboxState)"
                >
                  配置保存
                </a-button>

                <a-button
                  type="primary"
                  v-if="showFormItemType == 'datepicker'"
                  @click="onChangeForm(formDatePickerState)"
                >
                  配置保存
                </a-button>

                <a-button
                  type="primary"
                  v-if="showFormItemType == 'radio'"
                  @click="onChangeForm(formRadioState)"
                >
                  配置保存
                </a-button>

                <a-button
                  type="primary"
                  v-if="showFormItemType == 'cascader'"
                  @click="onChangeForm(formCascaderState)"
                >
                  配置保存
                </a-button>
              </a-space>

              <!-- <a-button type="primary" @click="submitBtn">保存</a-button> -->
            </a-form-item>
          </div>
        </div>
      </u-busi-card>
    </div>
  </u-dialog>
</template>

<script lang="ts" setup>
import {
  computed,
  nextTick,
  reactive,
  ref,
  toRaw,
  toRefs,
  UnwrapRef,
  useAttrs,
  watch,
} from 'vue';
import { FormInstance } from 'ant-design-vue'; // 确保你已经安装了 ant-design-vue
import {
  inputTypeSelectOptions,
  dymicTFormdataArr,
  datePickerOptions,
  formSelectType,
} from './enmu';
import { cloneDeep } from 'lodash';
import { alertC } from '@/util/common';
import * as dynamicFormsApi from '@/service/emergency/dynamicForms/index';
import * as menuService from '@/service/system/menu/index';
import { storeToRefs } from 'pinia';
import { useBaseStore } from '@/store';

let clickIndex = ref();
const emits = defineEmits(['success', 'close']);
const attrs = useAttrs();
const treeData = ref([]);
const formRef = ref();
// 缓存的枚举
const {
  ACTIONTYPE,
  ADV_REPORT_APLY,
  ADV_REPORT_GUEST_LEVEL,
  ADV_REPORT_MET,
  IS_BALANCE,
  LEAVE_TYPE,
  MECHANISMTYPE,
  OFFICIALACTIVITIES,
  OPEN_FORM,
  OVERTIME_EMP_TYPE,
  PAYFEE_TYPE,
  PAY_STATUS,
  PAY_TYPE,
  POS,
  POLICY_TYPE,
  PUR_NODE,
  PUR_TYPE,
  TRAVEL_APPLY_WAY,
  TRAVEL_SELF,
  TRAVEL_TYPE,
  TYPE_OF_FUNDS,
  USEFLAG,
  VEHICLESTATUS,
  VEHICLE_MODEL,
  ISPROXY,
} = storeToRefs(useBaseStore());

// 下拉框数据源
// const formSelectOptions = {
//   ACTIONTYPE: ACTIONTYPE.value,
//   ADV_REPORT_APLY: ADV_REPORT_APLY.value,
//   ADV_REPORT_GUEST_LEVEL: ADV_REPORT_GUEST_LEVEL.value,
//   ADV_REPORT_MET: ADV_REPORT_MET.value,
//   IS_BALANCE: IS_BALANCE.value,
//   LEAVE_TYPE: LEAVE_TYPE.value,
//   MECHANISMTYPE: MECHANISMTYPE.value,
//   OFFICIALACTIVITIES: OFFICIALACTIVITIES.value,
//   OPEN_FORM: OPEN_FORM.value,
//   OVERTIME_EMP_TYPE: OVERTIME_EMP_TYPE.value,
//   PAYFEE_TYPE: PAYFEE_TYPE.value,
//   PAY_STATUS: PAY_STATUS.value,
//   PAY_TYPE: PAY_TYPE.value,
//   POS: POS.value,
//   POLICY_TYPE: POLICY_TYPE.value,
//   PUR_NODE: PUR_NODE.value,
//   PUR_TYPE: PUR_TYPE.value,
//   TRAVEL_APPLY_WAY: TRAVEL_APPLY_WAY.value,
//   TRAVEL_SELF: TRAVEL_SELF.value,
//   TRAVEL_TYPE: TRAVEL_TYPE.value,
//   TYPE_OF_FUNDS: TYPE_OF_FUNDS.value,
//   USEFLAG: USEFLAG.value,
//   VEHICLESTATUS: VEHICLESTATUS.value,
//   VEHICLE_MODEL: VEHICLE_MODEL.value,
// }

// 获取树形
// type = init 为初次进入时的加载
const getTree = (type?: string) => {
  return menuService
    .tree('')
    .then(res => {
      if (res.code == 0 && res.data) {
        treeData.value.splice(0, treeData.value.length, ...res.data);
      }
    })
    .catch(() => {});
};

let elements = reactive<any>([
  {
    element: 'select',
    label: '关联审核',
    col: { span: 24 },
    key: 'ishaveaudit',
    formItemProps: { labelWidth: '80px', required: true },
    componentProps: {
      options: computed(() => ISPROXY.value),
      fieldNames: {
        label: 'name',
        value: 'code',
      },
    },
  },
  {
    element: 'treeselect',
    label: '菜单选择',
    col: { span: 24 },
    key: 'fkmoduleid',
    formItemProps: { labelWidth: '80px', required: true },
    componentProps: {
      treeData: computed(() => treeData.value),
      fieldNames: {
        label: 'name',
        value: 'keyid',
        children: 'children',
      },
      required: true,
    },
  },

  {
    element: 'input',
    label: '模块名称',
    col: { span: 24 },
    key: 'modulename',
    formItemProps: { labelWidth: '80px', required: true },
  },
  {
    element: 'input',
    label: '表单名称',
    col: { span: 24 },
    key: 'contractNo',
    formItemProps: { labelWidth: '80px', required: true },
  },
]);

//展示某类表单选项
let showFormItemType = ref('');

let formInputState: any = reactive({
  // id: '输入框',
  name: '标题',
  itemType: 'input',
  // type: "Text",
  addonAfter: '', //设置后置标签
  addonBefore: '', //设置前置标签
  allowClear: false, //点击清除图标删除内容
  bordered: true, //是否有边框
  clearIcon: '', //自定义清除图标
  placeholder: '', //输入框默认内容
  disabled: false, //是否禁用状态
  maxlength: 100, //最大长度
  prefix: '', //带有前缀图标的 input
  showCount: true, //是否展示字数
  status: '', //设置校验状态
  size: '', //控件大小
  suffix: '', //带有后缀图标的 input
  type: inputTypeSelectOptions[0].value, //声明 input 类型
});

let formSelectState: any = reactive({
  // id: '下拉框',
  name: '标题',
  itemType: 'select',
  //下拉框
  allowClear: false, //点击清除图标删除内容
  autoClearSearchValue: false, //在选中项后清空搜索框
  autofocus: false, //默认获取焦点
  bordered: true, //是否有边框
  clearIcon: '', //自定义清除图标
  defaultActiveFirstOption: true, //默认高亮第一个选项。
  defaultOpen: false, //默认展开下拉菜单
  disabled: false, //是否禁用状态
  popupClassName: '', //下拉菜单的 className 属性
  dropdownMatchSelectWidth: true, //下拉菜单和选择器同宽
  filterOption: true, //是否根据输入项进行筛选
  firstActiveValue: '', //默认高亮的选项
  mode: '', //模式
  selectoptions: '', //下拉框数据
  options: [], //数据源
  placeholder: '', //输入框提示内容
});

let formSwitchState: any = reactive({
  // id: '开关',
  name: '标题',
  itemType: 'switch',
  autofocus: false, //组件自动获取焦点
  checkedChildren: '', //选中时的内容
  disabled: false, //禁用
  loading: false, //加载中的开关
  size: '', //开关大小
  checkedValue: true, //选中时的值
  unCheckedValue: false, //非选中时的值
  unCheckedChildren: '', //非选中时的内容
});

let formTreeState: any = reactive({
  // id: '树',
  name: '标题',
  itemType: 'tree',
  showSearch: true, //搜索框
  checkable: false, //复选框
  checkedKeys: [], //选中复选框的树节点
  disabled: false, //禁用
  expandedKeys: [], //展开指定的树节点
  selectedKeys: [], //设置选中的树节点
  fieldNames: {}, //对应的字段
  multiple: false, //多选
  // selectable:false//是否可选中
  treeData: [], //数据源
});

let formUploadState: any = reactive({
  // id: '上传',
  name: '标题',
  itemType: 'upload',
  disabled: false, //禁用
  multiple: false, //是否多选
});

let formCheckboxState: any = reactive({
  // id: '复选框',
  itemType: 'checkbox',
  name: '标题',
  options: [], //数据源
  disabled: false, //禁止
});

let formDatePickerState: any = reactive({
  // id: '时间框',
  name: '标题',
  itemType: 'datepicker',
  valueFormat: datePickerOptions[0].value, //日期格式
  disabled: false, //禁止
  disabledDate: false, //不可选择日期
});

let formRadioState: any = reactive({
  // id: '单选框',
  name: '标题',
  itemType: 'radio',
  options: [], //数据源
  disabled: false, //禁止
});

let formCascaderState: any = reactive({
  // id: '级联框',
  name: '标题',
  itemType: 'cascader',
  allowClear: true, //支持清除
  bordered: true, //边框
  disabled: false, //禁止
  fieldNames: {}, //自定义字段
  multiple: false, //是否支持多节点
  options: [], //数据源
  showSearch: false, //显示搜索框
  searchValue: '', //搜索的值
});

const ruleForm = ref<FormInstance | null>(null);
const SForm = reactive({
  fkmoduleid: '',
  ishaveaudit: 0,
  modulename: '',
  contractNo: '',
  keyid: '',
});

let form = ref({
  contractNo: SForm.contractNo,
  list: [],
});

const rules = ref({});
/**新加表单项 */
const addContent = val => {
  if (val) {
    form.value.list.push(val);
  }
};

/**添加文本框单项 */
const addFormItem = (ItemType: any, object?: object) => {
  let obj = {};

  if (ItemType == 'cascader') {
    obj = {
      // id: '级联框',
      name: '标题',
      itemType: 'cascader',
      allowClear: true, //支持清除
      bordered: true, //边框
      disabled: false, //禁止
      fieldNames: {}, //自定义字段
      multiple: false, //是否支持多节点
      options: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                {
                  value: 'xihu',
                  label: 'West Lake',
                },
              ],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              children: [
                {
                  value: 'zhonghuamen',
                  label: 'Zhong Hua Men',
                },
              ],
            },
          ],
        },
      ], //数据源
      showSearch: false, //显示搜索框
      searchValue: '', //搜索的值
    };
  }

  if (ItemType == 'radio') {
    obj = {
      // id: '单选框',
      name: '标题',
      itemType: 'radio',
      options: [
        { label: 'Apple', value: 'Apple' },
        { label: 'Pear', value: 'Pear' },
      ], //数据源
      disabled: false, //禁止
    };
  }

  if (ItemType == 'input') {
    obj = {
      // id: '输入框',
      name: '标题',
      itemType: 'input',
      // 输入框
      addonAfter: '', //设置后置标签
      addonBefore: '', //设置前置标签
      allowClear: false, //点击清除图标删除内容
      bordered: true, //是否有边框
      clearIcon: '', //自定义清除图标
      placeholder: '', //输入框提示内容
      disabled: false, //是否禁用状态
      maxlength: 100, //最大长度
      prefix: '', //带有前缀图标的 input
      showCount: true, //是否展示字数
      status: '', //设置校验状态
      size: '', //控件大小
      suffix: '', //带有后缀图标的 input
      type: 'text', //声明 input 类型}
    };
  }

  if (ItemType == 'select') {
    obj = {
      // id: '下拉框',
      name: '标题',
      itemType: 'select',
      //下拉框
      allowClear: false, //点击清除图标删除内容
      autoClearSearchValue: false, //在选中项后清空搜索框
      autofocus: false, //默认获取焦点
      bordered: true, //是否有边框
      clearIcon: '', //自定义清除图标
      defaultActiveFirstOption: true, //默认高亮第一个选项。
      defaultOpen: false, //默认展开下拉菜单
      disabled: false, //是否禁用状态
      popupClassName: '', //下拉菜单的 className 属性
      dropdownMatchSelectWidth: true, //下拉菜单和选择器同宽
      filterOption: true, //是否根据输入项进行筛选
      firstActiveValue: '', //默认高亮的选项
      selectoptions: '', //下拉框数据
      mode: '', //模式
      options: [], //数据源
      placeholder: '', //输入框提示内容
    };
  }
  //开关
  if (ItemType == 'switch') {
    obj = {
      // id: '开关',
      name: '标题',
      itemType: 'switch',
      autofocus: false, //组件自动获取��点
      checkedChildren: '', //选中时的内容
      checkedValue: true, //选中时的值
      disabled: false, //禁用
      loading: false, //加载中的开关
      size: '', //开关大小
      unCheckedChildren: '', //非选中时的内容
      uncheckedValue: false, //非选中时的值
    };
  }

  //树
  if (ItemType == 'tree') {
    obj = {
      // id: '树',
      name: '标题',
      itemType: 'tree',
      showSearch: true, //搜索框
      checkable: false, //复选框
      checkedKeys: [], //选中复选框的树节点
      disabled: false, //禁用
      expandedKeys: [], //展开指定的树节点
      selectedKeys: [], //设置选中的树节点
      fieldNames: {}, //对应的字段
      multiple: false, //多选
      treeData: [], //数据源
    };
  }

  // 上传
  if (ItemType == 'upload') {
    obj = {
      // id: '上传',
      name: '标题',
      itemType: 'upload',
      accept: '', //上传类型
      disabled: false, //禁用
      multiple: false, //是否多选
    };
  }
  // 复选
  if (ItemType == 'checkbox') {
    obj = {
      // id: '复选框',
      name: '标题',
      itemType: 'checkbox',
      options: [
        { label: 'Apple', value: 'Apple' },
        { label: 'Pear', value: 'Pear' },
        { label: 'Orange', value: 'Orange' },
      ], //数据源
      disabled: false, //禁止
    };
  }

  // 时间
  if (ItemType == 'datepicker') {
    obj = {
      // id: '时间框',
      name: '标题',
      itemType: 'datepicker',
      valueFormat: datePickerOptions[0].value, //日期格式
      disabled: false, //禁止
      disabledDate: false, //不可选择日期
    };
  }
  addContent(obj);
};
/**删除动态表单项 */
const delectContent = (index: number) => {
  const formInputStateIndex = Number(
    localStorage.getItem('formInputStateIndex')
  );
  form.value.list.splice(formInputStateIndex, 1);
  showFormItemType.value = '';
};
// 移动动态表单项
const MoveContent = (index: number) => {
  const formInputStateIndex = Number(
    localStorage.getItem('formInputStateIndex')
  );
  const result = cloneDeep(form.value.list[formInputStateIndex]);
  form.value.list[formInputStateIndex] = cloneDeep(
    form.value.list[formInputStateIndex - 1]
  );
  form.value.list[formInputStateIndex - 1] = result;
  showFormItemType.value = '';
};

// 表单单项点击数据交互到右侧表单
const onClick = (index, Itemtype) => {
  // 输入框
  if (Itemtype == 'input') {
    for (let key in form.value.list[index]) {
      formInputState[key] = form.value.list[index][key];
    }
  }
  // 下拉框
  if (Itemtype == 'select') {
    for (let key in form.value.list[index]) {
      formSelectState[key] = form.value.list[index][key];
    }
  }
  // 开关
  if (Itemtype == 'switch') {
    for (let key in form.value.list[index]) {
      formSwitchState[key] = form.value.list[index][key];
    }
  }

  // 树
  if (Itemtype == 'tree') {
    for (let key in form.value.list[index]) {
      formTreeState[key] = form.value.list[index][key];
    }
  }

  // 上传
  if (Itemtype == 'upload') {
    for (let key in form.value.list[index]) {
      formUploadState[key] = form.value.list[index][key];
    }
  }

  // 复选框
  if (Itemtype == 'checkbox') {
    for (let key in form.value.list[index]) {
      formCheckboxState[key] = form.value.list[index][key];
    }
  }

  // 时间狂
  if (Itemtype == 'datepicker') {
    for (let key in form.value.list[index]) {
      formDatePickerState[key] = form.value.list[index][key];
    }
  }

  // 单选框
  if (Itemtype == 'radio') {
    for (let key in form.value.list[index]) {
      formRadioState[key] = form.value.list[index][key];
    }
  }

  // 级联框
  if (Itemtype == 'cascader') {
    for (let key in form.value.list[index]) {
      formCascaderState[key] = form.value.list[index][key];
    }
  }
  clickIndex.value = index;
  showFormItemType.value = Itemtype;
  localStorage.setItem('formInputStateIndex', index);
};
// 确定表单更改，数据交互到左侧动态表单
const onChangeForm = (formState: any) => {
  const formInputStateIndex = localStorage.getItem('formInputStateIndex');
  for (let k in formState) {
    form.value.list[formInputStateIndex][k] = formState[k];
  }
};

// 提交表单
const submit = async () => {
  formRef.value.form.validate().then(async () => {
    let tform1 = <any>{
      fkmoduleid: '',
      ishaveaudit: 0,
      modulename: '',
      keyid: '',
    };
    form.value.contractNo = SForm.contractNo;
    form.value.list.map((item, index) => {
      item.id = dymicTFormdataArr[index];
    });

    form.value.list.forEach(item => {
      if (item.value) {
        item.value = '';
      }
    });
    tform1.formjson = JSON.stringify(form.value);
    tform1.fkmoduleid = SForm.fkmoduleid;
    tform1.ishaveaudit = SForm.ishaveaudit;
    tform1.modulename = SForm.modulename;
    tform1.keyid = SForm.keyid;

    const url = SForm.keyid ? 'updata' : 'create';
    const res = await dynamicFormsApi[url](tform1);

    if (res.code == 0) {
      alertC('表单创建成功', 'success');
      form.value.list = [];
      (form.value.contractNo = ''),
        (SForm.fkmoduleid = ''),
        (SForm.ishaveaudit = 0),
        (SForm.modulename = '');
      SForm.contractNo = '';
      SForm.keyid = '';

      emits('success');
      return;
    } else {
      alertC(res.msg, 'error');
      return;
    }
  });
};
//关闭
const close = () => {
  form.value.list = [];
  (form.value.contractNo = ''),
    (SForm.fkmoduleid = ''),
    (SForm.ishaveaudit = 0),
    (SForm.modulename = '');
  SForm.contractNo = '';
  SForm.keyid = '';
  emits('close');
};

//回显表单

const getHx = async () => {
  const res = await dynamicFormsApi.query(attrs.keyid);
  if (res.code == 0) {
    SForm.fkmoduleid = res.data.fkmoduleid;
    SForm.ishaveaudit = res.data.ishaveaudit;
    SForm.modulename = res.data.modulename;
    SForm.keyid = res.data.keyid;
    form.value = JSON.parse(res.data.formjson);
    SForm.contractNo = form.value.contractNo;
  }
  // 数据回显
  // SForm.fkmoduleid = recordsList.fkmoduleid
  // SForm.ishaveaudit = recordsList.ishaveaudit
  // SForm.modulename = recordsList.modulename
  // SForm.keyid = recordsList.keyid
  // form.value = JSON.parse(recordsList.formjson)
};
watch(
  () => showFormItemType.value,
  () => {
    if (showFormItemType.value == '') {
      clickIndex.value = 1000;
    }
  }
);

watch(
  () => form.value.list.length,
  () => {
    if (form.value.list.length == 0) {
      showFormItemType.value = '';
    }
    if (form.value.list.length > 20) {
      alertC('表单暂时最多添加20个控件', 'warning');
      form.value.list = form.value.list.slice(0, form.value.list.length - 1);
      return;
    }
  }
);

// 下拉框数据源--下拉
// watch(() => formSelectState.selectoptions, () => {
//   formSelectState.options = []
//   for (let key in formSelectOptions) {
//     if (key == formSelectState.selectoptions) {
//       formSelectState.options = formSelectOptions[key]
//     }
//   }
// }, { immediate: true })

// 下拉框数据源 -- 输入
watch(
  () => formSelectState.selectoptions,
  () => {
    formSelectState.options = [];
    const resultArr = formSelectState.selectoptions.split(',');
    resultArr.map(item => {
      formSelectState.options.push({ label: item, id: item });
    });

    // for (let key in formSelectOptions) {
    //   if (key == formSelectState.selectoptions) {
    //     formSelectState.options = formSelectOptions[key]
    //   }
    // }
  },
  { immediate: true }
);

watch(
  () => attrs.open,
  async (nav, val) => {
    if (nav == true) {
      await getTree();

      if (attrs.keyid) {
        nextTick(() => {
          getHx();
        });
      }
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="scss">
/* 你的样式 */
.contain {
  margin: 0;

  padding: 0;
  display: flex;
  justify-content: space-between;

  .formButtonBox {
    height: 80vh;
    background-color: #fff;
    border-radius: 2%;
    margin-right: 100px;

    .formButton {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .formBox {
    width: 800px;
    padding: 2vw;
    border-radius: 2%;
    background-color: #fff;
    height: 100%;
    box-sizing: border-box;
    min-height: 80vh;
    margin-right: 100px;

    .formButton {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .formItemBox {
    width: 800px;
    padding: 2vw;
    border-radius: 2%;
    background-color: #fff;
    height: 100%;
    box-sizing: border-box;
    min-height: 80vh;

    .formButton {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.itemBox {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
}

.active {
  border: 1px solid #444;
  padding: 10px 10px 10px 0;
  border-radius: 8px;
}
</style>
